<template>
  <div class="app-container calendar-list-container">
    <div class="block" v-for="(file,index) in imageFiles" :key="index">
      <el-image :src="file.fullUrl" fit="contain" style="width: 200px; height: 100px"></el-image>
      <div style="width:200px">
        <span>复制代码: </span>
        <div v-html="getHtml(file.fullUrl)" class="htmlDiv"></div>
      </div>
    </div>
    <br />
    <div style="clear:both">
      <el-upload :action="uplaodFileUrl" :on-success="fileSuccess" list-type="picture" accept="image/*" :show-file-list="false">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
  </div>
</template>
<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import { Message, MessageBox } from 'element-ui'
import { mapGetters } from 'vuex'
import { dict } from '@/const/dict'

export default {
  components: {},
  data () {
    return {
      uplaodFileUrl: url.LOGO_UPLOAD_URL,
      imageFiles: []
    }
  },
  created () {
    this.init()
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  methods: {
    init () {
      this.listOp().then(data => {
        if (data) {
          this.imageFiles = data
        }
      })
    },
    fileSuccess () {
      this.init()
    },
    getHtml (url) {
      return '<span>&lt;</span>img  src="' + url + '"<span>/&gt;</span>'
    },
    listOp () {
      return request({
        url: url.LOGO_LIST_URL,
        method: 'post',
        data: { 'key': 'key' }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 260px;
  height: 400px;
  float: left;
  padding: 15px;
}
.htmlDiv {
  word-wrap: break-word;
  word-break: normal;
}
</style>
